<template>
  <!-- 最外层容器 -->
  <div class="daai-dropdown">
    <!-- 触发元素 -->
    <Daai-Tooltip
      :trigger="trigger"
      :placement="placement"
      @visible-change="visibleChangeHandler"
      :manual="manual"
      ref="tooltipRef"
    >
      <slot></slot>
      <!-- 菜单项 -->
      <template #content>
        <ul class="daai-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <li v-if="item.divided" class="divided-placeholder"></li>
            <li
              class="daai-dropdown__item"
              :class="{ 'is-disabled': item.disabled }"
              :id="`dropdown-item-${item.key}`"
              @click="itemclick(item)"
            >
              <RenderVnode :v-node="item.label" />
            </li>
          </template>
        </ul>
      </template>
    </Daai-Tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import propTypes from './props'
import RenderVnode from '../Common/RenderVnode'
defineOptions({
  name: 'DaaiDropdown',
})
const props = defineProps(propTypes)

const tooltipRef = ref(null)

const emit = defineEmits(['select', 'visible-change'])
const itemclick = (item) => {
  if (item.disabled) {
    return
  }
  emit('select', item)
  // 点击后关闭下拉菜单
  if (props.hideAfterClick) {
    tooltipRef.value.hide()
  }
}

const visibleChangeHandler = (e) => {
  emit('visible-change', e)
}

defineExpose({
  hide() {
    tooltipRef.value.hide()
  },
  show() {
    tooltipRef.value.show()
  },
})
</script>

<style lang="scss" scoped></style>
